/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import {
  Platform,
  StyleSheet,
  Text,
  View, Image
} from 'react-native';
import React from 'react';
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation';
import Home from './src/view/Home';
import FlexDemo from './src/view/FlexDemo';
import ES6Demo from './src/view/ES6Demo';
import TopBarDemo from './src/view/TopBarDemo';
import AnimationDemo from './src/view/AnimationDemo';
import RNBtnDemo from './src/view/RNBtnDemo';
import RequestDemo from './src/view/RequestDemo';
import LoginPage from './src/view/LoginPage';
import PromiseDemo from './src/view/PromiseDemo';
import StorageDemo from './src/view/StorageDemo';
import BenchPage from './src/czy/Bench/BenchPage';
import MessagePage from './src/czy/Message/MessagePage';
import MinePage from './src/czy/Mine/MinePage';

class TabBarItem extends React.Component {
  render() {
    return (
      <Image source={this.props.focused ? this.props.selectedImage : this.props.normalImage}
        style={{ tintColor: this.props.tintColor, width: 25, height: 25 }}
      />
    )
  }

}


const Tab = TabNavigator(
  {
    BenchPage: {
      screen: BenchPage,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '工作台',
      }),
    },

    MessagePage: {
      screen: MessagePage,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '消息',
      }),
    },


    MinePage: {
      screen: MinePage,
      navigationOptions: ({ navigation }) => ({
        tabBarLabel: '我的',
      }),
    },

  },

  {
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    lazy: true,
    tabBarOptions: {
      showIcon: false,
      activeTintColor: '#06c1ae',
      inactiveTintColor: '#979797',
      style: { backgroundColor: '#ffffff', },
      labelStyle: {
        fontSize: 16, // 文字大小
      },
      tabStyle: {
        flex:1,
        alignItems:'center',
        justifyContent:'center'
      }
    }

  }

);



const App = StackNavigator({
  Home: { screen: Home },
  RNBtnDemo: { screen: RNBtnDemo },
  FlexDemo: { screen: FlexDemo },
  TopBarDemo: { screen: TopBarDemo },
  ES6Demo: { screen: ES6Demo },
  AnimationDemo: { screen: AnimationDemo },
  RequestDemo: { screen: RequestDemo },
  LoginPage: { screen: LoginPage },
  PromiseDemo: { screen: PromiseDemo },
  StorageDemo: { screen: StorageDemo },
  BenchPage: { screen: BenchPage },
  MessagePage: { screen: MessagePage },
  MinePage: { screen: MinePage },
  Tabs: { screen: Tab }
}, {
    headerMode: 'none'
  })
export default App;